<template>
  <div class="chart-container">
    <h3 class="title">排放阶段占比</h3>
    <div ref="chartRef" style="width: 630px; height: 300px;margin-left: 10px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Chart',
  data() {
    return {
      chart: null,
      chartData: [
        // { value: 1, name: '新能源',},
        // { value: 15, name: '国四及以下', },
        // { value: 18, name: '国五', },
        // { value: 13, name: '国六', }
      ]
    };
  },
  props: {
    data: {
      type: Object,
      default: () => {},
    }
  },
  watch: {
    data: {
      /*immediate:true,*/
      deep: true,
      handler(newValue, oldValue) {
        setTimeout(() => {
          let dd = []
          dd.push({ name: "国三", value: newValue.g3 }, { name: "国四", value: newValue.g4 }, { name: "国五", value: newValue.g5 }, { name: "国六", value: newValue.g6 }, { name: "新能源", value: newValue.xny })
          this.chartData = dd
          this.initChart();
          window.addEventListener('resize', () => this.chart.resize());
        }, 1000);

      },
    },
  },
  mounted() {

  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      window.removeEventListener('resize', () => this.chart.resize());
    }
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chartRef;
      this.chart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center',
          data: this.chartData.map(item => item.name),
          textStyle: { fontSize: 14, color: 'white' },
          itemGap: 15,
          itemWidth: 15,
          itemHeight: 15,
          borderColor: 'transparent'
        },
        series: [
          {
            name: '车辆类型',
            type: 'pie',
            center: ['35%', '50%'], // 饼图中心右移，腾出左侧空间
            radius: ['40%', '65%'],
            avoidLabelOverlap: true, // 启用自动布局避免重叠
            label: {
              show: true,
              position: 'outside',
              formatter: function (params) {
                // 直接使用 params.name 和 params.value（无需手动拼接 percent，ECharts 自动计算 d%）
                return `${params.name}: ${params.value} 占比:${params.percent}%`;
              },
              fontSize: 12,
              color: 'white',
              borderRadius: 4,
              padding: [2, 4],
              width: 120, // 限制标签宽度，避免过长文本溢出
              overflow: 'break', // 超出宽度自动换行
              whiteSpace: 'normal', // 允许换行
              lineHeight: 18 // 调整行高
            },
            labelLine: {
              show: true,
              length: 12, // 缩短引导线，减少横向偏移
              length2: 8,
              lineStyle: { color: 'rgba(255,255,255,0.7)' }
            },
            data: this.chartData.map(item => ({
              value: item.value,
              name: item.name
            })),
            itemStyle: {
              borderRadius: 4,
              borderWidth: 2,
              borderColor: 'white'
            },
            colors: ['#5470c6', '#91cc75', '#fac858', '#ee6666']
          }
        ]
      };

      this.chart.setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
.chart-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.title {
  text-align: center;
  color: #333;
  font-size: 18px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}
</style>